Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add slash in Debit card expiration #7362

Merged
merged 27 commits into from
Apr 13, 2022

Conversation

mananjadhav
Copy link
Collaborator

@mananjadhav mananjadhav commented Jan 21, 2022

Details

  • Adding slash "/" in DebitCard expiry

Fixed Issues

$ #6891

Tests

  1. Test auto slash for 2 digits
  2. Test backspace for 3 digits, 2 digits, digits ending with slash
  3. Test with paste text
  4. Tested with text already containing a slash
  5. Tested for 5 digit and 7 digit text
  • Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

  • I verified the PR has a small number of commits behind main
  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I clearly indicated the environment tests should be run in (Staging vs Production)
  • I wrote testing steps that cover success & fail scenarios (if applicable)
  • I included screenshots or videos for tests on all platforms
  • I ran the tests & verify they passed on:
    • iOS / native
    • Android / native
    • iOS / Safari
    • Android / Chrome
    • MacOS / Chrome
    • MacOS / Desktop
  • I verified there are no console errors related to changes in this PR
  • I followed proper code patterns (see Reviewing the code)
    • I added comments when the code was not self explanatory
    • I put all copy / text shown in the product in all src/languages/* files (if applicable)
    • I followed proper naming convention for platform-specific files (if applicable)
    • I followed style guidelines (in Styling.md) for all style edits I made
    • I followed the JSDocs style guidelines (in STYLE.md)
  • I followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I corroborated the UI performance was not affected (the performance is the same than main branch)
  • If I created a new component I verified that a similar component doesn't exist in the codebase

PR Reviewer Checklist

  • I verified the PR has a small number of commits behind main
  • I verified the correct issue is linked in the ### Fixed Issues section above
  • I verified testing steps are clear and they cover the changes made in this PR
    • I verified the testing environment is mentioned in the test steps
  • I verified testing steps cover success & fail scenarios (if applicable)
  • I checked that screenshots or videos are included for tests on all platforms
  • I verified tests pass on all platforms & I tested again on:
    • iOS / native
    • Android / native
    • iOS / Safari
    • Android / Chrome
    • MacOS / Chrome
    • MacOS / Desktop
  • I verified there are no console errors related to changes in this PR
  • I verified proper code patterns were followed (see Reviewing the code)
    • I verified comments were added when the code was not self explanatory
    • I verified any copy / text shown in the product was added in all src/languages/* files (if applicable)
    • I verified proper naming convention for platform-specific files was followed (if applicable)
    • I verified style guidelines were followed
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • I verified that this PR follows the guidelines as stated in the Review Guidelines
  • I verified other components are not impacted by changes in this PR (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified the UI performance was not affected (the performance is the same than main branch)
  • If a new component is created I verified that a similar component doesn't exist in the codebase

QA Steps

  1. Go to the Settings by clicking Profile Image on LHN
  2. Select "Payments" from the Sidebar
  3. Select Add Payment and choose "Debit Card"
  4. Start typing the expiry date, it should automatically add slash(/) when you type 2 digits.
  5. If you press backspace, then the slash should be removed automatically when you delete the third digit.
  • Verify that no errors appear in the JS console

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Web

web-slash-in-expiry-date

Mobile Web

mweb-slash-in-expiry-date

Desktop

desktop-slash-in-expiry-date

iOS

ios-autoslash.mov

Android

android-autoslash.mov

@mananjadhav mananjadhav marked this pull request as ready for review March 7, 2022 20:07
@mananjadhav mananjadhav requested a review from a team as a code owner March 7, 2022 20:07
@MelvinBot MelvinBot requested review from Julesssss and parasharrajat and removed request for a team, Julesssss and parasharrajat March 7, 2022 20:07
@mananjadhav
Copy link
Collaborator Author

@parasharrajat @Julesssss Did we check #7318 is working fine for Android and iOS? For me it doesn't text on prop change for native devices.

@parasharrajat
Copy link
Member

For me it doesn't text on prop change for native devices.

I didn't get it.

@parasharrajat
Copy link
Member

What exactly are you facing?

@mananjadhav
Copy link
Collaborator Author

What exactly are you facing?

The state value is updated in the form, but the TextInput doesn't show the updated value. Basically, when I do Backspace, it should delete the slash + digit and update the value but it doesn't reflect in TextInput. This happens only in native devices, works fine on Web, MWeb and Desktop.

@mananjadhav
Copy link
Collaborator Author

@parasharrajat ^

@parasharrajat
Copy link
Member

I will pull your branch see what is happening.

@parasharrajat
Copy link
Member

I tested and it seems this.state.expirationDate is always empty. Could you please test it carefully?

@mananjadhav
Copy link
Collaborator Author

That’s weird because I did log it. I’ll check again, and the same thing is working fine on web/mWeb and desktop

@parasharrajat
Copy link
Member

I tested on web.

@mananjadhav
Copy link
Collaborator Author

I tested on web.

🤔 Here's the video of Web and I've also logged the state.expirationDate in the render. Can you take a pull again? Maybe I didn't push all changes?

auto-slash-expiration.mp4

@Julesssss

This comment was marked as outdated.

@mananjadhav
Copy link
Collaborator Author

I couldn't find a specific issue with the code and the same delay isn't experienced in iOS.

Could it be that we're unnecessarily re-rendering the entire Add debit card form

It does rerender the component, should we try moving this into a separate TextInput?

@Julesssss I'll be able to access an Android device by tomorrow, can test release build after that.

@parasharrajat
Copy link
Member

Great. Thanks, @mananjadhav. Let's wait a bit for the slack thread.

@parasharrajat
Copy link
Member

@Julesssss What do you think would be the best path forward here?

@Julesssss
Copy link
Contributor

Sorry, I think my Slack thread comment was about a different issue 🤦

Maybe we continue with the release build test. If there's no noticeable lag we can probably just move forward.

I'll be able to access an Android device by tomorrow, can test release build after that.

@mananjadhav
Copy link
Collaborator Author

Maybe we continue with the release build test. If there's no noticeable lag we can probably just move forward.

@parasharrajat @Julesssss I was able to get access to an Android device and test a release build. I don't see a huge lag and it looks good enough to move forward. Attached is the video.

auto-slash-expiration-android_52XFdGB0.mp4

@Julesssss
Copy link
Contributor

@parasharrajat @Julesssss I was able to get access to an Android device and test a release build. I don't see a huge lag and it looks good enough to move forward. Attached is the video.

Awesome, thanks for that! Looks fine to me.

Comment on lines 196 to 197
// Backspace was hit/character removed
// Remove extra digit when there's a / involved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you just reword this sightly? It took me a couple of times to understand it properly

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated. Let me know if it is fine.

Copy link
Contributor

@Julesssss Julesssss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Looking good

Copy link
Member

@parasharrajat parasharrajat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

🎀 👀 🎀 C+ reviewed

@Julesssss Julesssss merged commit b85d4a9 into Expensify:main Apr 13, 2022
@OSBotify
Copy link
Contributor

🚀 Deployed to staging by @Julesssss in version: 1.1.56-0 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

@OSBotify
Copy link
Contributor

🚀 Deployed to production by @francoisl in version: 1.1.56-0 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants